<template>
  <div>
    <!-- List列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="value in list"
        :key="value.houseCode"
        :thumb="'http://liufusong.top:8080' + value.houseImg"
        @click="detail('/detail', value.houseCode)"
      >
        <template #title>
          <div>
            <strong style="font-size: 16px">{{ value.title }} </strong>
          </div>
        </template>
        <template #price>
          <div style="color: #fa5943">
            <strong style="font-size: 16px">1 </strong>元/月
          </div>
        </template>
        <template #desc>
          <div style="color: #babdbe">
            <div>{{ value.desc }}</div>
          </div>
        </template>
        <template #tags>
          <div style="background-color: #e1f5f8; width: 40px; height: 18px">
            <div style="color: #52c6d4">{{ value.tags[0] }}</div>
          </div>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { inquireHouses } from '@/api/article'

export default {
  name: 'ListHouses',
  data () {
    return {
      list: [],
      queryObj: {
        start: 1,
        end: 20
      },
      loading: false,
      finished: false
    }
  },
  methods: {
    detail (path, id) {
      this.$router.push({
        path,
        query: {
          id
        }
      })
    },
    async onLoad () {
      const data = await inquireHouses(this.queryObj)
      this.list = [...this.list, ...data.body.list]
      // 获取数据成功以后将loading修改为false，以便于下次加载获取数据
      this.loading = false
      // 每次请求完之后让当前页自增
      this.queryObj.start += 20
      this.queryObj.end += 20
      if (this.queryObj.end >= data.body.count) {
        // 如果当前页大于总页数时，将finished变量改为true，不再触发load事件
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
